<template>
	<view class="page_content">
		<view class="head_content">
			<CustomNavbar :title="$t('member.title')" color="#fff" bg="#262626"></CustomNavbar>
		</view>
		<view class="main_content">
			<view class="vip_box">
				<view class="top" v-if="userInfo.is_vip == 1">
					<view class="line1">{{ $t('member.vipUser') }}</view>
					<view class="line2">
						<text class="text1"></text>
						<text class="text2">{{ $t('member.vipExpire', { date: userInfo.vip_expiretime_text || '' }) }}</text>
					</view>
				</view>
				<view class="top" v-else>
					<view class="line1">{{ $t('member.defaultTitle') }}</view>
					<view class="line2">
						<text class="text1">{{ $t('member.defaultSubtitle1') }}</text>
						<text class="text2">{{ $t('member.defaultSubtitle2') }}</text>
					</view>
				</view>
				<view class="bottom">
					<view class="line1">
						<text class="text1">{{ $t('member.benefits') }}</text>
						<!-- <text class="text2">Ai智能助手</text> -->
					</view>
					<view class="line2"></view>
				</view>
				<image class="vip_image" src="/static/icons/vip.png" mode="widthFix"></image>
			</view>
			<view class="pay_box box_bg">
				<view class="title_box">
					<image class="image1" src="/static/images/arrow.png" mode="widthFix"></image>
					<text class="text">{{ $t('member.chooseTitle') }}</text>
					<image class="image2" src="/static/images/arrow.png" mode="widthFix"></image>
				</view>
				<view class="card_box">
					<view class="item" v-for="item in vipList" :key="item.id" @click="openVip(item.id, item.price)">
						<view class="price">
							<view class="oprice">￥{{ item.original_price }}</view>
							<view class="cprice">
								<text class="text1">￥</text>
								<text class="text2">{{ item.price }}</text>
								<text class="text3">/{{ item.type_text }}</text>
							</view>
						</view>
						<view class="button">{{ $t('member.openNow') }}</view>
					</view>
				</view>
			</view>
			
			<view class="task_box box_bg">
				<view class="title_box">
					<image class="image1" src="/static/images/arrow.png" mode="widthFix"></image>
					<text class="text">{{ textTitle }}</text>
					<image class="image2" src="/static/images/arrow.png" mode="widthFix"></image>
				</view>
				<view class="info_box">
					<u-parse :content="textInfo"></u-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	import { unifiedPay } from '@/common/utils/payment.js'
	export default {
		data() {
			return {
				vipList: [],
				buttonLoading: true,
				textTitle: "",
				textInfo: "",
			}
		},
		computed: {
			...mapGetters("user", ["token", "userInfo"]),
			...mapGetters("app", ["iosIsPay"]),
		},
		watch: {

		},
		onLoad() {
			this.getVipList()
		},
		methods: {
			...mapActions("user", ["getUserInfo"]),
			// 获取vip类型
			getVipList() {
				this.$request('user.vip').then(res => {
					if(res.code === 1) {
						if(res.data.list && res.data.list.length) {
							this.vipList = res.data.list
						}
						this.textTitle = res.data?.vip_desc?.title || ""
						this.textInfo = res.data?.vip_desc?.content || ""
					}
				})
			},
			// 开通vip
			openVip(id, price) {
				// #ifdef MP-WEIXIN
				if(!this.iosIsPay) return this.jumpView('/pages/user/info/contact')
				// #endif

				if(this.buttonLoading) {
					this.buttonLoading = false
					uni.showLoading({
						title: this.$t('member.opening'),
						mask: true
					})
					
					this.$request('order.create', {
						vip_id: id,
						total_fee: price,
						platform: this.$utils.platforms()
					}).then(res => {
						if(res.code === 1) {
							this.callPay(res.data.order_sn, 'auto', res.data.platform)
						}
					})
				}
			},
			// 获取支付参数（使用统一支付工具）
			callPay(order_sn, payment, platform) {
				unifiedPay({
					order_sn,
					payment: 'auto', // 自动选择支付方式
					platform,
					request: this.$request,
					store: this.$store,
					onSuccess: () => {
						this.buttonLoading = true
						this.getUserInfo()
						uni.$emit('updateUserInfo', true)
						uni.hideLoading()
					},
					onError: (msg) => {
						uni.showToast({
							title: msg || this.$t('payment.failed'),
							icon: 'none',
							duration: 2000
						})
						this.buttonLoading = true
						uni.hideLoading()
					},
					onCancel: () => {
						this.buttonLoading = true
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		background: #262626;
		
		.main_content {
			overflow-y: auto;
			padding: 24rpx 32rpx 60rpx 32rpx;
			position: relative;
			
			.vip_box {
				height: 320rpx;
				border: 3rpx solid transparent;
				border-radius: 32rpx;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image: linear-gradient(135deg, #1a1a1a 0%, #2d1a2d 50%, #1a1a1a 100%), 
				                  linear-gradient(135deg, #FFD700 0%, #FFA500 25%, #FF6B9D 50%, #C2185B 75%, #9C27B0 100%);
			
				padding: 40rpx 36rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
				box-shadow: 0 16rpx 48rpx rgba(212, 175, 55, 0.3);
				overflow: hidden;
				
				&::before {
					content: '';
					position: absolute;
					top: -50%;
					right: -50%;
					width: 200%;
					height: 200%;
					background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
					animation: shimmer 3s ease-in-out infinite;
				}
				
				.top {
					position: relative;
					z-index: 1;
					
					.line1 {
						color: transparent;
						background: linear-gradient(135deg, #FFD700 0%, #FFA500 25%, #FF6B9D 50%, #F8BBD0 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						font-size: 52rpx;
						font-weight: 900;
						letter-spacing: 2rpx;
						text-shadow: 0 0 20rpx rgba(255, 215, 0, 0.5);
					}
					
					.line2 {
						font-size: 26rpx;
						margin-top: 16rpx;
						
						.text1 {
							color: rgba(255, 255, 255, 0.7);
						}
						
						.text2 {
							color: #FFD700;
							font-weight: 600;
						}
					}
				}
				
				.bottom {
					position: relative;
					z-index: 1;
					
					.line1 {
						font-size: 26rpx;
						color: rgba(255, 255, 255, 0.9);
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-weight: 500;
						
					}
					
					.line2 {
						width: 100%;
						height: 6rpx;
						border-radius: 6rpx;
						background: linear-gradient(90deg, #FFD700 0%, #FFA500 50%, #FF6B9D 100%);
						margin-top: 16rpx;
						box-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.4);
					}
				}
				
				.vip_image {
					width: 280rpx;
					position: absolute;
					top: -60rpx;
					right: -20rpx;
					opacity: 0.9;
					filter: drop-shadow(0 8rpx 16rpx rgba(255, 215, 0, 0.3));
				}
			}
			
			@keyframes shimmer {
				0%, 100% {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(180deg);
				}
			}
			
			.title_box {
				margin-bottom: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.image1 {
					width: 56rpx;
					transform: rotate(180deg);
					opacity: 0.6;
				}
				
				.text {
					font-size: 44rpx;
					background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF6B9D 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					font-weight: 900;
					margin: 0 56rpx;
					letter-spacing: 2rpx;
				}
				
				.image2 {
					width: 56rpx;
					opacity: 0.6;
				}
			}
			
			.info_box {
				color: rgba(255, 255, 255, 0.9);
				font-size: 28rpx;
				line-height: 1.8;
			}
			
			.box_bg {
				border-radius: 24rpx;
				padding: 48rpx 40rpx 56rpx 40rpx;
				border: 2rpx solid rgba(255, 215, 0, 0.3);
				background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 50%, #2d1a2d 100%);
				box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.4), 
				            inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
					border-radius: 24rpx;
					pointer-events: none;
				}
			}
			
			.pay_box {
				margin-top: 48rpx;
				
				.card_box {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: -20rpx;
					
					.item {
						width: calc((100% - 60rpx) / 3);
						height: 300rpx;
						background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
						backdrop-filter: blur(10rpx);
						border: 2rpx solid rgba(255, 215, 0, 0.2);
						border-radius: 24rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						padding: 36rpx 20rpx 28rpx;
						font-weight: bold;
						margin: 0 30rpx 30rpx 0;
						position: relative;
						overflow: hidden;
						transition: all 0.3s ease;
						box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
						
						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							height: 4rpx;
							background: linear-gradient(90deg, #FFD700 0%, #FFA500 50%, #FF6B9D 100%);
						}
						
						&:active {
							transform: translateY(-4rpx);
							box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.3);
							border-color: rgba(255, 215, 0, 0.5);
						}
						
						&:nth-child(3n) {
							margin-right: 0;
						}
						
						.price {
							text-align: center;
							margin-top: 10rpx;
							width: 100%;
							
							.oprice {
								font-size: 22rpx;
								color: rgba(255, 255, 255, 0.5);
								text-decoration: line-through;
								margin-bottom: 8rpx;
							}
							
							.cprice {
								color: #FFD700;
								display: flex;
								align-items: baseline;
								justify-content: center;
								gap: 4rpx;

								.text1 {
									font-size: 24rpx;
									color: #FFD700;
								}
								
								.text2 {
									font-size: 36rpx;
									font-weight: 900;
									color: #FFD700;
								}
								
								.text3 {
									font-size: 24rpx;
									color: rgba(255, 255, 255, 0.8);
									font-weight: 500;
								}
							}
						}

						.button {
							width: 140rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							color: #fff;
							font-size: 26rpx;
							background: linear-gradient(135deg, #E91E63 0%, #9C27B0 100%);
							border-radius: 30rpx;
							font-weight: 600;
							box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3);
							transition: all 0.3s ease;
							
							&:active {
								transform: scale(0.95);
							}
						}
					}
				}
			}
			
			.task_box {
				margin-top: 32rpx;
			}
		}
	}
</style>
